<template>
  <div class="game-all-data-box" v-loading="loading">
      <div class="input-box">
          <span class="input-title" style="margin-left:0px;">日期</span>
          <el-date-picker
              @change="getList"
              v-model="date"
              :clearable="false"
              type="daterange"
              style="width:300px;"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
          </el-date-picker>
      </div>
      <div class="table-box">
          <div class="table-title-box">
              <div class="table-title"></div>
              <div class="table-title" v-if="status === 1">新增用户</div>
              <div class="table-title" v-else>活跃用户</div>
              <div class="table-title">1天后</div>
              <div class="table-title">2天后</div>
              <div class="table-title">3天后</div>
              <div class="table-title">4天后</div>
              <div class="table-title">5天后</div>
              <div class="table-title">6天后</div>
              <div class="table-title">7天后</div>
              <div class="table-title">14天后</div>
              <div class="table-title">30天后</div>
          </div>

          <div class="table-content-box">
              <div class="table-content">汇总数据</div>
              <div class="table-content" v-for="(_item, _index) in totalData" :key="_index">
                  <span>{{_item.count}}</span>
                  <span v-if="_index !== 0"> / </span>
                  <span v-if="_index !== 0">{{_item.scale | percent}}</span>
              </div>
          </div>
      </div>

      <div class="table-box">
          <div class="table-title-box">
              <div class="table-title">时间</div>
              <div class="table-title" v-if="status === 1">新增用户</div>
              <div class="table-title" v-else>活跃用户</div>
              <div class="table-title">1天后</div>
              <div class="table-title">2天后</div>
              <div class="table-title">3天后</div>
              <div class="table-title">4天后</div>
              <div class="table-title">5天后</div>
              <div class="table-title">6天后</div>
              <div class="table-title">7天后</div>
              <div class="table-title">14天后</div>
              <div class="table-title">30天后</div>
          </div>

          <div class="table-content-box" v-for="(item, index) in list" :key="index">
              <div class="table-content">{{item.date | timeInit}}</div>
              <div class="table-content" v-for="(_item, _index) in item.teamKeepOneDataVoList" :key="_index">
                  <span>{{_item.count}}</span>
                  <span v-if="_index !== 0"> / </span>
                  <span v-if="_index !== 0">{{_item.scale | percent}}</span>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import { formatDate } from '@/utils/utils'
export default {
  props: {
    tabIndex: {
      type: String,
      default: '1'
    }
  },
  data () {
      return {
          loading: false,
          list: [],
          total: 0,
          channel: null,
          fromList: [],
          pickerOptions: {
              disabledDate (time) {
                  return time.getTime() > (new Date().getTime() - 3600 * 1000 * 24)
              }
          },
          status: 1,
          date: [], // 时间
          totalData: [] // 汇总数据
      }
  },
  created () {
      this.status = Number(window.localStorage.getItem('_userDataWeidu')) || 1
      let start = formatDate(new Date().getTime() - 3600 * 1000 * 24 * 14, 'YYYY-MM-DD')
      let end = formatDate(new Date(), 'YYYY-MM-DD')
      this.date = [start, end]
  },

  watch: {
    tabIndex (index) {
      if (index === '4') {
        this.getList()
      }
    }
  },

  methods: {
      // 获取数据
      async getList () {
          if (this.loading) return
          this.loading = true

          let params = {}

          if (this.date && this.date.length) {
            params.fromDate = this.date[0] + ' 00:00:00'
            params.toDate = this.date[1] + ' 23:59:59'
          }
          let res = await this.$http.get('/team/selectTeamKeep', {
              params
          })
          if (res.code === '0') {
              this.list = res.data || []
              this.total = res.count
              this.getTotalData()
          } else {
              this.$message({
                  type: 'error',
                  message: res.desc
              })
          }
          this.loading = false
      },

      // 计算汇总数据
      getTotalData () {
          this.totalDataInit()
          this.list.forEach(item => {
              let { teamKeepOneDataVoList } = item
              teamKeepOneDataVoList.forEach((_item, _index) => {
                  this.totalData[_index].count += _item.count
                  this.totalData[_index]._num++
              })
          })
          this.totalData = this.totalData.filter((item, index) => {
              item.count = parseInt(item.count / item._num) || 0
              if (index === 0) {
                  this.totalStartData = item.count
              } else {
                  item.scale = item.count / this.totalStartData
              }
              return item._num
          })
      },

      totalDataInit () {
          this.totalData = [
              { count: 0, scale: 0, _num: 0 },
              { count: 0, scale: 0, _num: 0 },
              { count: 0, scale: 0, _num: 0 },
              { count: 0, scale: 0, _num: 0 },
              { count: 0, scale: 0, _num: 0 },
              { count: 0, scale: 0, _num: 0 },
              { count: 0, scale: 0, _num: 0 },
              { count: 0, scale: 0, _num: 0 },
              { count: 0, scale: 0, _num: 0 },
              { count: 0, scale: 0, _num: 0 }
          ]
      }
  },

  filters: {
      timeInit (val) {
          if (val) {
              return formatDate(val, 'YYYY-MM-DD')
          } else {
              return '-'
          }
      },

      percent (val) {
          if (val) {
              return parseInt(val * 1000) / 10 + '%'
          } else {
              return '0%'
          }
      }
  }
}
</script>

<style lang="scss" scoped>
  .game-all-data-box {
      .input-box {
          margin-top: 10px;
          font-size: 13px;
          font-weight: 500;
          .input-title {
              margin: 0 10px 0 20px;
          }
          .btn {
              margin-left: 20px;
          }
      }
      .table-box {
          margin: 20px 0;
          border: 1px #EEE solid;
          .table-title-box {
              width: 100%;
              display: flex;
              align-items: center;
              background: #fafafa;
              .table-title {
                  &:first-child {
                      width: 15%;
                  }
                  width: 8.5%;
                  border-right: 1px #EEE solid;
                  font-size: 13px;
                  color: rgba(0, 0, 0, 0.85);
                  font-weight: 500;
                  text-align: center;
                  padding: 15px 0;
                  &:last-child {
                      border-right: none;
                  }
              }
          }

          .table-content-box {
              display: flex;
              align-items: center;
              border-top: 1px #EEE solid;
              width: 100%;
              &:hover {
                  background-color: rgba(186, 231, 255, .3);
              }
              .table-content {
                  &:first-child {
                      width: 15%;
                  }
                  width: 8.5%;
                  font-size: 12px;
                  padding: 10px 0;
                  text-align: center;
                  border-right: 1px #EEE solid;
                  &:nth-child(3) {
                      background-color: rgba(186, 231, 255, 1);
                  }
                  &:nth-child(4) {
                      background-color: rgba(186, 231, 255, .8);
                  }
                  &:nth-child(5) {
                      background-color: rgba(186, 231, 255, .6);
                  }
                  &:nth-child(6) {
                      background-color: rgba(186, 231, 255, .4);
                  }
                  &:nth-child(7) {
                      background-color: rgba(186, 231, 255, .35);
                  }
                  &:nth-child(8) {
                      background-color: rgba(186, 231, 255, .3);
                  }
                  &:nth-child(9) {
                      background-color: rgba(186, 231, 255, .25);
                  }
                  &:nth-child(10) {
                      background-color: rgba(186, 231, 255, .15);
                  }
                  &:nth-child(11) {
                      background-color: rgba(186, 231, 255, .1);
                      border-right: none;
                  }
              }
          }
      }
  }
</style>

<style lang="scss">
  .input-seclect {
      .el-select-dropdown__wrap {
          // height: 500px;
          max-height: 500px;
      }
  }
</style>
